<template>
<div style="float">
  <div id="header">
      <div id="header1">
        <div v-if="!$store.state.login">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名">
              <el-input
                v-model="formInline.userName"
                placeholder="用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="formInline.userPassword"
                placeholder="密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="primary" @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <div style="color: white">
            欢迎光临，
            <span>{{ $store.state.clientName }}</span>
          </div>
        </div>
      </div>
      <div id="header2">
      <div style="margin-right:10px;">
        <smallCarVue></smallCarVue>
        <peopleheaderVue></peopleheaderVue>
      </div>
        
    </div>
    </div>
</div>
   
</template>
<script>
import smallCarVue from "../components/smallCar.vue";
import peopleheaderVue from "../components/peopleheader.vue";
export default {
  components: {
    smallCarVue,
    peopleheaderVue
  },
  inject:['reload'],    //注入reload方法
  data() {
    return {
      formInline: {
        userName: "",
        userPassword: "",
      }
    };
  },
  methods: {
    login() {
      this.data.login(this.formInline.userName,this.formInline.userPassword);
    },
    register() {
      this.data.register(this.formInline.userName,this.formInline.userPassword);
    },
  },
};
</script>
<style>
#header1{
  float: left;
}
#header2{
  float: right;
}
#header {
  height: 70px;
  background-color: black;
  padding-top: 20px;
  padding-left: 20px;
}
</style>